<template>
  <div class="contain">
    <div class="content">
      <div class="title">
        <p>合作次数统计</p>
        <img src="../assets/con2.png" alt="" />
      </div>
      <div class="image">
        <el-table :data="Mydata" show-index="true" show-overflow-tooltip height="250">
          <el-table-column label="序号" type="index" width="80px"></el-table-column>
          <el-table-column label="单位1" width="300px" prop="name1"></el-table-column>
          <el-table-column label="单位2" width="300px" prop="name2"></el-table-column>
          <el-table-column label="合作次数" width="120px" prop="value"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { reqTable1 } from '@/api/conn'
import { ref, onMounted, watch, reactive } from 'vue'
import useCounterStore from '@/stores/counter'

let table = ref()
let counterStore = useCounterStore()

interface CloudDate {
  name1: string
  name2: string
  value: number
}
;[]
let Mydata: CloudDate = reactive([
  {
    name1: '',
    name2: '',
    value: 0
  }
])

onMounted(() => {
  fetchData()
})
watch(
  () => counterStore.province,
  () => {
    fetchData()
  }
)

const fetchData = async () => {
  const { province } = counterStore
  let result: any = await reqTable1(province)
  Object.assign(Mydata, result.data)
  console.log(Mydata)
}
</script>
<style scoped lang="scss">
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center; /* 水平居中内容 */
  .content {
    width: 100%; /* 盒子内容的宽度为盒子宽度的90% */
    background: url(../assets/con3.png) no-repeat;
    background-size: cover;
    background-position: center 10px;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 22px;
      text-align: left;
      font-weight: bold;
      p {
        margin: 12px 0 0 0;
      }
    }

    .image {
      width: 100%;
      height: 110%;
      .el-table {
        --el-table-border-color: rgba(255, 255, 255, 0);
        --el-table-header-bg-color: rgba(255, 255, 255, 0);
        --el-table-bg-color: rgba(255, 255, 255, 0);
        --el-table-tr-bg-color: rgba(255, 255, 255, 0);
        --el-table-text-color: white;
        --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.466);
      }
    }
  }
}
</style>
